<template>
  <div id="app">
    <MyHeader background="green" title="购物车案例"></MyHeader>
   <div class="main">
     <MyGood v-for="obj in list" :key="obj.id" :obj="obj"></MyGood>
   </div>
    <MyFooter :list="list" @selecta="selectAll" :allnumber="allnumber" :price="price"></MyFooter>
  </div>
</template>

<script>
import MyHeader from "@/components/MyHeader.vue";
import MyGood from "@/components/MyGood.vue";

import MyFooter from "@/components/MyFooter.vue";
export default {
  name: 'App',
  methods:{
    selectAll(val){
      this.list.forEach(obj=>obj.goods_state=val)
    }
  },
  data(){
    return {
      list:[]
    }
  },
  components: {
    MyHeader,
    MyGood,
    MyFooter
  },
  created() {
    this.$axios({
      url:"/api/cart",

    }).then(res=>{
      console.log(res)
      this.list=res.data.list
    })
  },
  computed:{
    allnumber:{
      get(){
        var sum=0
        this.list.forEach(obj=>{
          if (obj.goods_state)sum+=obj.goods_count
        })
        return sum
      }
    },
    price(){
      var sum=0
      this.list.forEach(obj=>{
        if (obj.goods_state)sum+=obj.goods_count*obj.goods_price

      })
      return sum
    }
  }
}
</script>

<style scoped>
.main{
  padding-top: 45px;
  padding-bottom: 50px ;
}
</style>
